<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .container .cart {
        width: 400px;
        /*background-color: lightgreen;*/
        margin: auto;
      }
      .container .title {
        background-color: lightblue;
        height: 40px;
        line-height: 40px;
        text-align: center;
        /*color: #fff;*/
      }
      .container .total {
        background-color: #ffce46;
        height: 50px;
        line-height: 50px;
        text-align: right;
      }
      .container .total button {
        margin: 0 10px;
        background-color: #dc4c40;
        height: 35px;
        width: 80px;
        border: 0;
      }
      .container .total span {
        color: red;
        font-weight: bold;
      }
      .container .item {
        height: 55px;
        line-height: 55px;
        position: relative;
        border-top: 1px solid #add8e6;
      }
      .container .item img {
        width: 45px;
        height: 45px;
        margin: 5px;
      }
      .container .item .name {
        position: absolute;
        width: 120px;
        top: 0;
        left: 55px;
        font-size: 16px;
      }

      .container .item .change {
        width: 100px;
        position: absolute;
        top: 0;
        right: 50px;
      }
      .container .item .change a {
        font-size: 20px;
        width: 30px;
        text-decoration: none;
        background-color: lightgray;
        vertical-align: middle;
      }
      .container .item .change .num {
        width: 40px;
        height: 25px;
      }
      .container .item .del {
        position: absolute;
        top: 0;
        right: 0px;
        width: 40px;
        text-align: center;
        font-size: 40px;
        cursor: pointer;
        color: red;
      }
      .container .item .del:hover {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <my-cart> </my-cart>
      </div>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
      Vue.component("my-cart", {
        template: `<div class="cart">
          <cart-title></cart-title>
         <cart-item :list="list" @add-num=change($event) @del-item=del></cart-item>
         <cart-total :list="list"></cart-total>
         </div>`,
        data() {
          return {
            list: [
              {
                id: "1",
                img: "img/a.jpg",
                name: "tcl彩电",
                price: 1000,
                num: 1,
              },
              {
                id: "2",
                img: "img/b.jpg",
                name: "机顶盒",
                price: 1080,
                num: 1,
              },
              {
                id: "3",
                img: "img/c.jpg",
                name: "海尔冰箱",
                price: 2000,
                num: 1,
              },
              {
                id: "4",
                img: "img/d.jpg",
                name: "小米手机",
                price: 1500,
                num: 1,
              },
              {
                id: "5",
                img: "img/e.jpg",
                name: "pptv电视",
                price: 4000,
                num: 1,
              },
            ],
          };
        },
        methods: {
          change(e) {
            this.list.forEach((item) => {
              if (item.id == e.id&&e.type == "add") {
                console.log(123);
                  item.num += 1;
                  return 
              }else if (item.id == e.id&&e.type == "inp") {
                console.log(123);
                  item.num = e.value;
                }else if(item.id == e.id&&e.type=="sub"){
                  if(item.num==1){
                    return
                  }
                  item.num-=1
                }
            });
          },
          del(e){
            this.list=this.list.filter(item=>item.id!=e)
          }
        },
      });
      Vue.component("cart-title", {
        template: `<div class="title">我的商品</div>`,
        data() {
          return {};
        },
      });
      Vue.component("cart-item", {
        props: ["list"],
        template: `  
            <div>
              <div class="item" v-for="item in list">
                <img :src="item.img" />
                <div class="name">{{item.name}}<span>/{{item.price*item.num}}</span></div>
                <div class="change">
                  <a href="" @click.prevent=sub(item.id)>－</a>
                  <input type="text" class="num"  :value="item.num" @blur=change(item.id,$event) />
                  <a href="" @click.prevent=add(item.id) >＋</a>
                </div>
                <div class="del" @click=del(item.id)>×</div>
              </div>
            </div>
          `,
        data() {
          return {};
        },
        methods: {
          change(id, e) {
            console.log(id,e);
            this.$emit("add-num", { id, value: e.target.value,type:"inp" });
          },
          sub(id){
            this.$emit("add-num", { id,type:"sub" });
          },
          add(id){
            this.$emit("add-num", { id,type:"add"});
          },
          del(id){
            this.$emit("del-item", id);
          }

        },
      });
      Vue.component("cart-total", {
        props: ["list"],
        template: `<div class="total">
              <span>总价：{{total}}</span>
              <button>结算</button>
            </div>`,
        data() {
          return {};
        },
        computed: {
          total() {
            let total = 0;
            this.list.forEach((item) => (total += item.price * item.num));
            return total;
          },
        },
      });
      var vm = new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>
</html>
